<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:include="include :: header('新增绘声绘影动态')" />
    <th:block th:include="include :: summernote-css" />
  </head>
  <body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
      <form class="form-horizontal m" id="form-dynamic-add">
        <div class="form-group">
          <label class="col-sm-3 control-label is-required">动态标题：</label>
          <div class="col-sm-8">
            <input
              name="title"
              class="form-control"
              type="text"
              maxlength="255"
              required
            />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label is-required">发布者：</label>
          <div class="col-sm-8">
            <input
              name="publisher"
              class="form-control"
              type="text"
              maxlength="100"
              required
            />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label is-required">动态内容：</label>
          <div class="col-sm-8">
            <textarea
              name="content"
              class="form-control summernote"
              required
            ></textarea>
          </div>
        </div>
      </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: summernote-js" />
    <script type="text/javascript">
      var prefix = ctx + "hui/interact/graphic";
      $("#form-dynamic-add").validate({
        focusCleanup: true,
      });

      function submitHandler() {
        if ($.validate.form()) {
          // 获取富文本内容
          var content = $(".summernote").summernote("code");
          var data = $("#form-dynamic-add").serializeArray();

          // 更新content字段
          for (var i = 0; i < data.length; i++) {
            if (data[i].name === "content") {
              data[i].value = content;
              break;
            }
          }

          // 转换为对象
          var formData = {};
          $.each(data, function (i, field) {
            formData[field.name] = field.value;
          });

          $.ajax({
            cache: true,
            type: "POST",
            url: prefix + "/add",
            contentType: "application/json",
            data: JSON.stringify(formData),
            success: function (result) {
              if (result.code == 0) {
                $.modal.msgSuccess(result.msg);
                // 获取父窗口并刷新数据
                var parent = window.parent;
                if (parent && parent.loadDynamics) {
                  parent.loadDynamics();
                }
                // 关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
              } else {
                $.modal.msgError(result.msg);
              }
            },
            error: function (xhr, status, error) {
              $.modal.msgError("提交失败，请重试");
            },
          });
        }
      }

      $(function () {
        // 初始化富文本编辑器
        $(".summernote").summernote({
          height: 300,
          lang: "zh-CN",
          callbacks: {
            onImageUpload: function (files) {
              // 这里可以实现图片上传功能
              var file = files[0];
              var reader = new FileReader();
              reader.onload = function (e) {
                $(".summernote").summernote("insertImage", e.target.result);
              };
              reader.readAsDataURL(file);
            },
          },
        });
      });
    </script>
  </body>
</html>
